import React from "react";
import { Card } from "antd";
import styles from "./index.module.scss"
import {FundTwoTone,FileAddTwoTone ,ShoppingTwoTone } from "@ant-design/icons"
import Echarts from "@/components/echarts/Echarts";
import MyTab from "@/components/Tab/Tab";

const Home = () => {
  return (
    <div className={styles.home}>
      <Card className='card small'>
        <FundTwoTone className='icon' />
        <div className="count">
        0
      </div>
      <div  className="title">
        今日访问量
      </div>
      </Card>
      <Card className='card small'>
        <FileAddTwoTone className='icon' twoToneColor="#ff7382" />
        <div className="count">
        0
      </div>
      <div className="title">
        新增用户量
      </div>
      </Card>
      <Card className='card small'> 
      <ShoppingTwoTone className='icon' twoToneColor='#00cba1' />
      <div className="count">
        0
      </div>
      <div className="title">
        今日购买量
      </div>
      </Card>
      <Card className='card median'> 
        <table>
          <tbody>
          <tr>
            <td></td>
            <td>课程访问量</td>
            <td>课程购买量</td>
            <td>听课人数</td>
            <td>机构数</td>
          </tr>
          <tr className='all'>
            <td className='txt'>总量</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
          </tr>
          <tr>
            <td>昨日</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
          </tr>
          </tbody>
        </table>
      </Card>
      <Card className='card big'> 
      <div className='echartsBox'>
        <MyTab component={Echarts} />
      </div>
      </Card>
    </div>
  );
};
export default Home;
